<template>
  <div>
    <el-date-picker
        v-model="value1"
        type="date"
        placeholder="Pick a day"
      />
      {{ value1 }}
      <hr>
      <el-date-picker
        v-model="value2"
        type="daterange"
        range-separator="-"
        start-placeholder="Start date"
        end-placeholder="End date"
      />
      {{ value2 }}
      <hr>
      <el-date-picker
        v-model="value3"
        type="date"
        placeholder="Pick a Date"
        format="YYYY/MM/DD"
        value-format="YYYY/MM/DD"
      />
      {{ value3 }}
  </div>
  <hr>
  <h1>tree</h1>
  <el-tree
    show-checkbox
    @check-change="f2"
    style="max-width: 600px"
    :data="data"
    @node-click="f1"
  />
</template>

<script setup>
import { ref } from 'vue'

const value1 = ref('')
const value2 = ref('')
const value3 = ref('2024/08/12')

const f1=(a,b,c,d)=>{
  console.log(a,b,c,d);
  console.log(a.label);
}
const f2=(a,b,c)=>{
  console.log(a);
  // console.log(a);
}

const data = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]
</script>

<style lang="scss" scoped>

</style>